<template>
  <div class="password-container">
    <div class="bg title">
      <el-row :gutter="20" type="flex" align="middle">
        <el-col :span="12">
          <div class="search-name">
            <el-input
              v-model="searchForm.name"
              type="primary"
              placeholder="请输入名称"
              suffix-icon="el-icon-search"
              size="small"
              clearable
              @keyup.enter.native="onSearch"/>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="right">
            <el-button type="primary" size="small" @click="modal.typeCount++">我的类型</el-button>
            <el-button type="primary" size="small" @click="showAddModal">添加账号</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--卡片-->
    <div class="cards">
      <el-tabs type="border-card">
        <el-tab-pane v-for="(accountGroup,index) in accountGroupList" :key="index" :label="accountGroup.name">
          <!--卡片显示数据-->
          <el-row :gutter="0">
            <el-col v-for="(i,index) in accountGroup.accounts" v-if="filterCard(i)" :key="index" :xs="24" :sm="12" :lg="6">
              <div class="box-card-header">
                <el-card shadow="always" class="card">
                  <div slot="header" class="clearfix">
                    <span class="cell">{{ i.name }}</span>
                    <span v-if="i.accessWay === 2" class="card-button">
                      <el-button type="text" size="small" class="button-size" @click="showEditModal(i)">编辑</el-button>
                      <el-button
                        type="text"
                        size="small"
                        class="button-size"
                        style="color: #f56c6c"
                        @click="showDeleteModal(i.id)">删除</el-button>
                      <el-button
                        type="text"
                        size="small"
                        class="button-size"
                        @click="showShareModal(i.id)">分享</el-button>
                    </span>
                  </div>
                  <form-with-button label="路径：" class="line-limit-length" @click="copy(i.url)">
                    <el-link v-if="isUrl(i.url)" :href=" i.url " type="primary" target="_blank">{{ i.url }}</el-link>
                    <span v-else>{{ i.url }} </span>
                  </form-with-button>
                  <form-with-button label="账号：" class="line-limit-length" @click="copy(i.account)">
                    <span>{{ i.account }}</span>
                  </form-with-button>
                  <form-with-button label="密码：" class="line-limit-length" @click="copy(i.password)">
                    <span>{{ i.password }}</span>
                  </form-with-button>
                  <form-with-button :show-button="false" label="创建：" class="line-limit-length">
                    <span>{{ i.creator }}</span>
                  </form-with-button>
                  <el-tooltip :content="i.remark" class="item" effect="dark" placement="bottom">
                    <form-with-button :show-button="false" label="备注：">
                      <span class="line-limit2-length">{{ i.remark }}</span>
                    </form-with-button>
                  </el-tooltip>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--增加账户弹窗-->
    <el-dialog :visible.sync="modal.add" title="增加个人账户">
      <el-form label-width="100px">
        <el-form-item label="类型">
          <el-select v-model="pwd.accountTypeId" placeholder="请选择账户类型">
            <el-option
              v-for="item in accountTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="pwd.name"/>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="pwd.url"/>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="pwd.account"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="pwd.password"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="pwd.remark"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="addPwd">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改账户弹窗-->
    <el-dialog :visible.sync="modal.edit" title="修改个人账户">
      <el-form label-width="100px">
        <el-form-item label="类型">
          <el-select v-model="pwd.accountTypeId" placeholder="请选择账户类型">
            <el-option
              v-for="item in accountTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="pwd.name"/>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="pwd.url"/>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="pwd.account"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="pwd.password"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="pwd.remark"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="updatePwd">确 定</el-button>
      </div>
    </el-dialog>
    <!--分享账户弹窗-->
    <el-dialog :visible.sync="modal.share" title="分享">
      <el-tabs v-model="share.activeName">
        <el-tab-pane label="分享到组" name="1">
          <!--分享到角色-->
          <div>
            <div>
              <el-checkbox-group v-model="share.checkRoles">
                <el-checkbox v-for="(role,index) in share.roles" :key="index" :label="role.id">{{ role.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分享到个人" name="2">
          <!--分享给个人-->
          <div>
            <two-check :data="share.users" @change="selectUserChange"/>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="sharePwd">确 定</el-button>
      </div>
    </el-dialog>

    <!--账户类型管理弹窗-->
    <user-account-type :count="modal.typeCount"/>
  </div>
</template>

<script>
import {
  addPwd,
  updatePwd,
  sharePwd,
  deletePwd,
  getSysAndUserType,
  getPwdGroup
} from '../../api/password/userPassword';
import { UserGetRoleListFunc, getUserByRole } from '../../api/user.js';
import { validateURL } from '../../utils/validate';
import { MessageBox } from 'element-ui';
import UserAccountType from './component/userAccountType';
import FormWithButton from './component/formWithButton';
import TwoCheck from './component/TwoCheck';

export default {
  name: 'UserPassword',
  components: { FormWithButton, UserAccountType, TwoCheck },
  data() {
    return {
      isBigIcon: false,
      searchForm: {
        name: '',
        accountTypeId: null
      },
      modal: {
        add: false,
        edit: false,
        share: false,
        typeCount: 0
      },
      // 分页数据
      page: {
        currentPage: 1,
        pageSize: 12,
        total: 0
      },
      sysPasswordList: [],
      accountGroupList: [],
      accountTypes: [],
      pwd: {
        'account': null,
        'accountTypeId': null,
        'name': null,
        'password': null,
        'remark': null,
        'url': null
      },
      share: {
        // 所有的角色
        roles: [],
        // 所有用户
        users: [],
        // 选中的角色
        checkRoles: [],
        // 选中的用户
        checkUsers: [],
        activeName: '1',
        shareId: null
      }
    };
  },
  created() {
    this.getPassword();
    this.getType();
    // this.test()
  },
  methods: {
    copy(val) {
      const _this = this;
      console.log(val);
      this.$copyText(val).then(function(e) {
        _this.$message({
          message: '复制成功：' + val,
          type: 'success'
        });
      }, function(e) {
        _this.$message.error('复制失败：' + e);
      });
    },
    // 过滤卡片
    filterCard(data) {
      var value = this.searchForm.name;
      if (!value) return true;
      value = value.toLowerCase();
      return (data.account && data.account.toLowerCase().indexOf(value) !== -1) ||
          (data.name && data.name.toLowerCase().indexOf(value) !== -1) ||
          (data.url && data.url.toLowerCase().indexOf(value) !== -1);
    },
    isUrl(url) {
      return validateURL(url);
    },
    // 后台获取账号
    getPassword() {
      getPwdGroup().then(response => {
        this.accountGroupList = response.data;
      });
    },
    // 弹出窗口
    showAddModal() {
      this.modal.add = true;
      this.getType();
    },
    showEditModal(val) {
      const { id, account, accountTypeId, name, password, remark, url } = val;
      this.pwd = { ...this.pwd, id, account, accountTypeId, name, password, remark, url };
      this.modal.edit = true;
      this.getType();
    },
    // 弹出分享窗口
    showShareModal(id) {
      UserGetRoleListFunc().then(response => {
        this.share.roles = response.data;
      });
      getUserByRole().then(response => {
        this.share.users = response.data;
      });
      this.modal.share = true;
      this.share.shareId = id;
    },
    // 选择用户改变
    selectUserChange(users) {
      this.share.checkUsers = users;
    },
    showDeleteModal(id) {
      MessageBox.confirm(
        '确定删除吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.deletePwd(id);
      });
    },
    closeModal() {
      this.modal.add = false;
      this.modal.edit = false;
      this.modal.share = false;
      this.pwd = {};
      this.share.checkRoles = [];
      this.share.checkUsers = [];
    },

    // 访问后台接口
    getType() {
      getSysAndUserType().then(response => {
        this.accountTypes = response.data;
      });
    },
    addPwd() {
      this.modal.add = false;
      addPwd(this.pwd).then(response => {
        this.pwd = {};
        this.getPassword();
      });
    },
    updatePwd() {
      this.modal.edit = false;
      updatePwd(this.pwd.id, this.pwd).then(response => {
        this.pwd = {};
        this.getPassword();
      });
    },
    sharePwd() {
      const type = this.share.activeName;
      this.modal.share = false;
      var shareId = this.share.shareId;
      if (type === '1') {
        if (this.share.checkRoles && this.share.checkRoles.length > 0) {
          sharePwd(type, shareId, this.share.checkRoles);
        }
      }
      if (type === '2') {
        if (this.share.checkUsers && this.share.checkUsers.length > 0) {
          sharePwd(type, shareId, this.share.checkUsers);
        }
      }
      this.share.checkRoles = [];
      this.share.checkUsers = [];
    },
    deletePwd(id) {
      deletePwd(id).then(response => {
        this.getPassword();
      });
    }
  }
};
</script>

<style scoped>

  .line-limit-length {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .line-limit2-length {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .password-container {
    padding: 20px;
    /*height: 100vh;*/
    background-color: rgb(240, 242, 245);
  }

  /*标题*/
  .title {
    margin: 0 5px;
    padding: 10px 20px;
  }

  .cards {
    margin-top: 20px;
    padding: 5px;

    .box-card-header {
      position: relative;
      margin: 3%;
      transition: all 0.3s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        /*filter: contrast(130%);*/
      }
    }

    .card {
      height: 302px;
    }

    .card-button {
      float: right;
      margin-right: 10px;
    }

    .card-button .button-size {
      padding-top: 0px;
      padding-bottom: 0px;
    }
  }

  .search-name {
    /*padding: 0 15px;*/
    width: 255px;
  }

  /*背景色*/
  .bg {
    background-color: rgb(255, 255, 255);
    border-radius: 5px
  }

  /*靠右*/
  .right {
    float: right;
  }
</style>

